<template>
  <div class="banner-wrapper">
    <a-carousel autoplay :speed="500" :autoplaySpeed="6000">
      <div class="banner-item banner-bg" v-for="(e, index) in list" :key="index" @click="hello">
        <!-- <img :src="e.img" style="height: 100%;width: 100%;" /> -->
      </div>
    </a-carousel>
  </div>
</template>
<script>
export default {
  name: 'banner',
  components: {},
  data() {
    return {
      num: 0,
      list: [
        {
          img: require('@/assets/img/1/1.jpg')
        },
        {
          img: require('@/assets/img/1/3.jpg')
        },
        {
          img: require('@/assets/img/1/4.jpg')
        },
        {
          img: require('@/assets/img/1/5.jpg')
        },
        {
          img: require('@/assets/img/1/6.jpg')
        },
        {
          img: require('@/assets/img/1/7.jpg')
        },
        {
          img: require('@/assets/img/1/8.jpg')
        }
      ]
    };
  },

  methods: {
    btnclick(val) {
      this.current = val;
      window.localStorage.setItem(CUR, this.current);
    },
    hello($event) {
      console.log(`hello index: ${$event}`);
    },
    next() {
      if (this.num < this.list.length - 5) {
        this.num = this.num + 1;
      } else {
        this.num = this.num;
      }
    },
    before() {
      if (this.num > 0) {
        this.num = this.num - 1;
      } else {
        this.num = this.num;
      }
    }
  }
};
</script>
<style lang="less">
.banner-wrapper {
  // filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1A202E, endColorstr=#131720);
  // background-image: linear-gradient(180deg, #1a202e 1%, #131720 100%);
  overflow: hidden;
  cursor: pointer;
  
  .banner-item{
    height: 480px;
    overflow: hidden;
  }

  button.slider-btn.slider-btn-left {
    background: transparent;
  }

  button.slider-btn.slider-btn-right {
    background: transparent;
  }

  /* 轮播图圆点 */
  .slider-indicators-right {
    right: 1% !important;
  }

  .slider-indicator-icon {
    background: #ffffff !important;
    height: 10px;
    margin: 0 0.1rem;
    cursor: pointer;
    border-radius: 50%;
  }

  .slider-indicator-active {
    background: #3498db !important;
  }
}
</style>
